<t<template>
	<view class="imt-audio">
		<view class="audio-wrapper">
			<view class="audio-number">{{format(current)}}</view>
			<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration"
				@changing="seek=true,current=$event.detail.value" @change="audio.seek($event.detail.value)"></slider>
			<view class="audio-number">{{format(duration)}}</view>
		</view>
		<view class="audio-control-wrapper" :style="{color}">
			<view class="audio-control audio-control-prev" v-if="control" :style="{borderColor:color}" @click="prev">
				&#xe601;</view>
			<view class="audio-control audio-control-switch" :class="{audioLoading:loading}"
				:style="{borderColor:color}" @click="myPlay()">
				{{loading?'&#xe600;':(paused?'&#xe865;':'&#xe612;')}}</view>
			<view class="audio-control audio-control-next" v-if="control" :style="{borderColor:color}" @click="next">
				&#xe601;</view>
		</view>
	</view>
	</template>

	<script>
		export default {
			data() {
				return {
					audio: uni.createInnerAudioContext(),
					current: 0, //当前进度(s)
					duration: 0, //总时长(s)
					paused: true, //是否处于暂停状态
					loading: false, //是否处于读取状态
					seek: false ,//是否处于拖动状态
				}
			},
			props: {
				src: String, //音频链接
				autoplay: Boolean, //是否自动播放
				continue: Boolean, //播放完成后是否继续播放下一首，需定义@next事件
				control: {
					type: Boolean,
					default: true
				}, //是否需要上一曲/下一曲按钮
				color: {
					type: String,
					default: '#169af3'
				} //主色调
			},
			methods: {
				myPlay(){
					// if(this.src==""){
					// 	return;
					// }
					this.audio.paused?this.play():this.audio.pause()
				},
				//返回prev事件
				prev() {
					this.$emit('prev')
				},
				//返回next事件
				next() {
					this.$emit('next')
				},
				//格式化时长
				format(num) {
					return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 -
						String(Math.floor(num % 60)).length) + Math.floor(num % 60)
				},
				//点击播放按钮
				play() {
					let that = this;
					 // setTimeout(function() {
					 // 	that.myPlay()
					 // 	that.loading = true
					 // }, 100);
					 // setTimeout(function() {
					 // 	that.myPlay()
					 // 	that.loading = true
					 // }, 200);
					 // setTimeout(function() {
					 // 	that.myPlay()
					 // 	that.loading = true
					 // }, 300);
				// 	 setTimeout(function() {
				// 	  that.audio.play()
				// 	 }, 50);
					
				// 	setTimeout(function() {
				// 	  that.audio.pause()
				// 	}, 100);
				// 		setTimeout(function() {
				// 		 	  that.audio.play()
				// 		}, 150);
												
				// 	setTimeout(function() {
				// 	 	   that.audio.pause()
				// 	}, 200);
						console.log("点击了播放按钮")
				
					
					 setTimeout(function() {
						 
						that.audio.play()
					}, 250);

				}
			},
			created() {
				if (this.src) {
					this.audio.src = this.src
					this.autoplay && this.play()
				}
				this.audio.obeyMuteSwitch = false
				//音频进度更新事件
				this.audio.onTimeUpdate(() => {
				console.log("音频进度更新事件")
					if (!this.seek) {
						this.current = this.audio.currentTime
					}
					if (!this.duration) {
						this.duration = this.audio.duration
					}
				})
				//音频播放事件
				this.audio.onPlay(() => {
					console.log("开始播放")
					this.paused = false
					this.loading = false
				})
				//音频暂停事件
				this.audio.onPause(() => {
					this.paused = true
						this.loading = false
				})
				//音频结束事件
				this.audio.onEnded(() => {
				console.log("音频结束事件")
									
					if (this.continue) {
						this.next()
					} else { 
						this.paused = true
						this.current = 0
						
					}
				})
				//音频完成更改进度事件
				this.audio.onSeeked(() => {
					this.seek = false
				})
			},
			beforeDestroy() {
				this.audio.destroy()
			},
			watch: {
				src(src, old) {
					this.audio.src = src 
					this.current = 0 
					this.duration = 0
					var that = this
					var timeId = setTimeout(function() {
						if (old || that.autoplay) {
							that.play()
						}
					}, 1000)
				}
			}
		}
	</script>

	<style>
		@font-face {
			font-family: 'icon';
			src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot');
			src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot?#iefix') format('embedded-opentype'),
				url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff2') format('woff2'),
				url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff') format('woff'),
				url('//at.alicdn.com/t/font_1104838_fxzimc34xw.ttf') format('truetype'),
				url('//at.alicdn.com/t/font_1104838_fxzimc34xw.svg#iconfont') format('svg');
		}

		.imt-audio {
			padding: 30upx 0;
			background: #fff;
			border-radius: 20upx;
		}

		.audio-wrapper {
			display: flex;
			align-items: center;
		}

		.audio-number {
			width: 120upx;
			font-size: 24upx;
			line-height: 1;
			color: #333;
			text-align: center;
		}

		.audio-slider {
			flex: 1;
			margin: 0;
		}

		.audio-control-wrapper {
			margin-top: 20upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: "icon" !important;
		}

		.audio-control {
			font-size: 32upx;
			line-height: 1;
			border: 4upx solid;
			border-radius: 50%;
			padding: 16upx;
		}

		.audio-control-next {
			transform: rotate(180deg);
		}

		.audio-control-switch {
			font-size: 40upx;
			margin: 0 100upx;
		}

		.audioLoading {
			animation: loading 2s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}

		@keyframes loading {
			to {
				transform: rotate(360deg);
			}
		}
	</style>